<template>
  <div
    :class="[
      file_name_body,
      css_wind_light_hover,
      css_content_padding,
      css_child_margin_top,
    ]"
    :keyVal_node="file_name_inp"
  >
    <div :class="[title_file_name]">{{ title_file_name_placeholder }}</div>

    <div :class="[file_name_inp_body]">
      <keyVal_node
        :for_form="upload_file_form"
        :for_key="spacename_file_name"
        :class="[file_name_inp, css_font_size_20]"
        type="text"
        :id="file_name_inp"
        :placeholder="placeholder_file_name_inp"
        autocomplete="false"
      ></keyVal_node>
    </div>
  </div>
</template>

<script setup lang="ts">
import { onMounted } from 'vue';

import './file_name.css';

import keyVal_node from '../../../global_comps/uni_comps/keyVal_node/keyVal_node.vue';

import {
  css_child_margin_top,
  css_content_padding,
  css_font_size_20,
  css_wind_light_hover,
} from '../../../global_comps/Css';
import {
  file_name_body,
  file_name_inp,
  file_name_inp_body,
  placeholder_file_name_inp,
  spacename_file_name,
  title_file_name,
  title_file_name_placeholder,
} from './DataDefine/sourceData';
import { init_file_name } from './file_name';
import { upload_file_form } from '../../DataDefine/sourceData';

let cur_file_name_props = defineProps({});

onMounted(() => {
  init_file_name();
});
</script>
